<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>

<head>

<meta charset="utf-8">

<title>玩公仔拍賣網</title>

<link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://puertokhalid.com/up/demos/puerto-Mega_Menu/css/normalize.css'>
<link rel="stylesheet" href="/playdoll/css/LeftSideBarStyle.css" media="screen" type="text/css" />
<link rel="stylesheet" href="/playdoll/css/ImagePlayerStyle.css" media="screen" type="text/css" />
<link type="text/css" href="/playdoll/css/footer.css" rel="stylesheet" media="screen" /> 
<link type="text/css" href="/playdoll/css/top-bar.css" rel="stylesheet" media="screen" /> 
<link type="text/css" href="/playdoll/css/nav.css" rel="stylesheet" media="screen" /> 
<link type="text/css" href="/playdoll/css/Base.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="/playdoll/js/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="/playdoll/css/jquery.fancybox.css?v=2.1.5" media="screen" />
<script type="text/javascript" src="/playdoll/js/jquery-1.10.2.min.js"></script>

	<style type="text/css">

		body {
			font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;	
			margin: 0;
			padding: 0;
			color: #000000;
			background-color: #000000;			
		}
		
		
		/* ~~ 這個容器環繞著所有其他的 Div，並依百分比設定其寬度 ~~ */
		.container {
			width: 100%;
			max-width: 1260px;/* 建議您使用最大寬度，如此版面在大型螢幕上就不致於過寬，讓行保持比較方便閱讀的長度。IE6 並不適用這項宣告。 */
			min-width: 780px;/* 建議您使用最小寬度，如此版面在大型螢幕上就不致於過窄，讓行在側欄中保持比較方便閱讀的長度。IE6 並不適用這項宣告。 */
			margin: 0 auto; /* 兩側的自動值與寬度結合後，版面便會置中對齊。如果將 .container 的寬度設為 100%，就不需要這麼做。 */
			color: #333333;
			font-size: 14px;
			text-align: inherit;
		}

		/* ~~ 頁首沒有指定的寬度，而會橫跨版面的整個寬度。頁首包含影像預留位置，必須由您自己的連結商標加以取代 ~~ */
		.header {
				
			display:block;
		}


		.sidebar1 {
			float: left;
			width: 270px;
			padding-bottom: 10px;
			
		}
		.content {
			padding: 10px 0;			
		}


		/* ~~ 這個群組選取器會在 .content 區域空間中提供清單 ~~ */
		.content ul, .content ol { 
			padding: 0 15px 15px 40px; /* 這個欄位間隔反映出上方標題和段落規則中的右方間隔。當欄位間隔位於下方時，便可將清單中的其他元素間隔開來；當位於左方時，則可藉此建立縮排。這些動作均可依需要進行調整。 */
		}

		/* ~~ 導覽清單樣式 (如果選擇使用 Spry 之類的預製飛出選單，則可移除) ~~ */
		ul.nav {
			list-style: none; /* 這會移除清單標記 */
			border-top: 1px solid #666; /* 這會建立連結的上方邊框，其他則都會使用下方邊框放置在 LI 上 */
			margin-bottom: 15px; /* 這會在下方的內容上建立導覽間的間距 */
		}
		ul.nav li {
			border-bottom: 1px solid #666; /* 這會建立按鈕分隔 */
		}
		ul.nav a, ul.nav a:visited { /* 將這些選取器放入群組，即可確保您的連結即使在受到點擊後仍保有按鈕外觀 */
			padding: 5px 5px 5px 15px;
			display: block; /* 這會為連結提供區塊屬性，使連結能填滿包含它的整個 LI，讓整個區域都能回應滑鼠點按動作。 */
			text-decoration: none;
			background-color: #6070AB;
			color: #000;
		}
		ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* 這會同時變更滑鼠及鍵盤導覽器的背景及文字顏色 */
			background-color: #6F7D94;
			color: #FFF;
		}
		

		
		/* ~~ 其他 float/clear 類別 ~~ */
		.fltrt {  /* 這個類別可用來讓元素在頁面中浮動，浮動的元素必須位於頁面上相鄰的元素之前。 */
			float: right;
			margin-left: 8px;
		}
		.fltlft { /* 這個類別可用來讓元素在頁面左方浮動，浮動的元素必須位於頁面上相鄰的元素之前。 */
			float: left;
			margin-right: 8px;
		}
		.clearfloat { /* 這個類別可放置在 <br /> 或空白的 Div 上，當做接在 #container 內最後一個浮動 Div 後方的最後一個元素 (如果從 #container 移除或取出 #footer) */
			clear:both;
			height:0;
			font-size: 1px;
			line-height: 0px;
		}

			
		/*熱門商品*/
		#HotProduct {
                            align:center;
                            text-decoration: none;
                            color:#ffffff;
                        }  
                 /*登入燈箱*/       
                 .fancybox-custom .fancybox-skin {
			box-shadow: 0 0 50px #222;
		}   
	</style>
</head>



<body>
   
<div class="container">
    
    <%@include  file="../WebTool/Top_bar.jsp" %>
    <%@include  file="../WebTool/Logo.jsp" %>

 
<!--左邊SPRY選單列-->
  <div class="sidebar1">
		<ul class="mcd-menu">
			
			<li class="float">
				<a class="search">
                                    <form action="SearchBar" method="post">
					<input type="text" placeholder="Search . . ." style="height:15px;" id="search" name="search">
                                        <button type="submit"><i class="fa fa-search" style="height:15px;"></i></button>
                                    </form>    
				</a>
				<!--<a href="" class="search-mobile">
					<i class="fa fa-search"></i>
				</a>-->
			</li>
		
			<li>
				<a href="QueryByList?pid=1&cid=1" id="">
					<i class="fa fa-shopping-cart"></i>
					<strong>可動玩偶</strong>
					<small>媽的我會動</small>
				</a>					
			</li>
			<li>
				<a href="QueryByList?pid=1&cid=2" class="">
					<i class="fa fa-shopping-cart"></i>
					<strong>轉蛋食玩</strong>
					<small>轉死你</small>
				</a>				
			</li>
			<li>
				<a href="QueryByList?pid=1&cid=3">
					<i class="fa fa-shopping-cart"></i>
					<strong>PVC 人偶</strong>
					<small>塑化劑</small>
				</a>				
			</li>
			<li>
				<a href="QueryByList?pid=1&cid=4">
					<i class="fa fa-shopping-cart"></i>
					<strong>塑膠組裝模型</strong>
					<small>塑化劑 + 強力膠 = 死定</small>
				</a>				
			</li>
			<li>
				<a href="QueryByList?pid=1&cid=5">
					<i class="fa fa-shopping-cart"></i>
					<strong>遙控模型、玩具</strong>
					<small>what does the FOX say</small>
				</a>				
			</li>
			<li>
				<a href="QueryByList?pid=1&cid=6">
					<i class="fa fa-shopping-cart"></i>
					<strong>金屬模型</strong>
					<small>IRON Man</small>
				</a>				
			</li>
			<li>
				<a href="QueryByList?pid=1&cid=7">
					<i class="fa fa-shopping-cart"></i>
					<strong>GK模型</strong>
					<small>GGININ</small>
				</a>				
			</li>
			<li>
				<a href="QueryByList?pid=1&cid=8">
					<i class="fa fa-shopping-cart"></i>
					<strong>洋娃娃與配件</strong>
					<small>.....</small>
				</a>				
			</li>
			<li>
				<a href="QueryByList?pid=1&cid=9">
					<i class="fa fa-shopping-cart"></i>
					<strong>LEGO/樂高積木</strong>
					<small>Let it GO</small>
				</a>				
			</li>
			<li>
				<a href="QueryByList?pid=1&cid=10">
					<i class="fa fa-shopping-cart"></i>
					<strong>Cosplay</strong>
					<small>大家都愛</small>
				</a>				
			</li>			
			
		</ul>
  
  </div>
  <!-- END SIDEBAR 1 -->
  
  <div id="content">
      	<div class="slide_screen">            
                <legend align='center' style='color:#ffffff;font-size:1.5em'>最新商品</legend>
                <hr>
		<table  style="width:80%;/*position: absolute;right:15px;left:22%*/">                   
		<tr>
			<td colspan=3>
				<ul class="I_clearfix">
					<li class="liA">
						<div class="window clearfix">
                                                    <c:forEach items="${Topres}" var="top" begin="0" step="1" end="2" >
							<div class="piece">
								<a href="/playdoll/shop/index?pid=${top["產品編號"]}" target=""><img width="500px" height="375px" src="/playdoll/WebTool/GetProductPic.jsp?pid=${top['產品編號']}" alt=""></a>
								<div class="bar">
									<b1>${top["產品名稱"]}</b1>
									<p>${top["單價"]}</p>
									<span></span>
									<a href="" target="">&nbsp;</a>
								</div>
							</div>
                                                     </c:forEach>                   
						</div>
					</li>
					<li class="liB">
						<div class="window clearfix">
                                                     <c:forEach items="${Topres}" var="top" begin="3" step="1" end="5" >
							<div class="piece">
								<a href="/playdoll/shop/index?pid=${top["產品編號"]}" target=""><img width="225px" height="185px" src="/playdoll/WebTool/GetProductPic.jsp?pid=${top['產品編號']}" alt=""></a>
								<div class="bar">
									<b1>${top["產品名稱"]}</b1>
									<p>${top["單價"]}</p>
									<span></span>
									<a href="" target="">&nbsp;</a>
								</div>
							</div>
                                                   </c:forEach>                     
						</div>
					</li>
					<li class="liC">
						<div class="window clearfix">
                                                    <c:forEach items="${Topres}" var="top" begin="6" step="1" end="8" >
							<div class="piece">
								<a href="/playdoll/shop/index?pid=${top["產品編號"]}" target=""><img width="225px" height="186px" src="/playdoll/WebTool/GetProductPic.jsp?pid=${top['產品編號']}"  alt=""></a>
								<div class="bar">
									<b1>${top["產品名稱"]}</b1>
									<p>${top["單價"]}</p>
									<span></span>
									<a href="" target="">&nbsp;</a>
								</div>
							</div>
                                                    </c:forEach>  
						</div>
					</li>
					<li class="liD">
						<div class="window clearfix">
                                                    <c:forEach items="${Topres}" var="top" begin="9" step="1" end="11" >
							<div class="piece">
								<a href="/playdoll/shop/index?pid=${top["產品編號"]}" target=""><img width="225px" height="375px" src="/playdoll/WebTool/GetProductPic.jsp?pid=${top['產品編號']}"  alt=""></a>
								<div class="bar">
									<b1>${top["產品名稱"]}</b1>
									<p>${top["單價"]}</p>
									<span></span>
									<a href="" target="">&nbsp;</a>
								</div>            
							</div>
                                                   </c:forEach> 
						</div>
					</li>
				</ul>
			
				<ul class="libtn">
					<li _index="1"></li>
					<li _index="2"></li>
					<li _index="3"></li>
				</ul>
			</td>
		</tr>   
                
               
                
                <tr><td colspan='3'> <!--<legend align='center' style='color:#ffffff;font-size:1.5em'>熱門商品</legend>
                --><hr></td></tr>
                <tr><td>&nbsp</td></tr>
		<tr>
                    <c:forEach items="${result}" var="pp" begin="0" step="1" end="2">
			<td align="center">

                            <a href="/playdoll/shop/index?pid=${pp["產品編號"]}" style="text-decoration: none; "><img style="width:240px;height:160px;" src="/playdoll/WebTool/GetProductPic.jsp?pid=${pp["產品編號"]}" title="${pp["產品名稱"]}" />
                           
                            <br><br>
                            <p style="color:#ffffff">${pp["產品名稱"]}<br>
                            ${pp["單價"]}元／點閱次數:${pp["點閱次數"]}</p></a>
                        </td>
                    </c:forEach>
		</tr>
                
                <tr>
                    <c:forEach items="${result}" var="pp" begin="3" step="1" end="5">
			<td align="center">
                            <a href="/playdoll/shop/index?pid=${pp["產品編號"]}" style="text-decoration: none;"><img style="width:240px;height:160px;" src="/playdoll/WebTool/GetProductPic.jsp?pid=${pp["產品編號"]}" title="${pp["產品名稱"]}" />
                            <br><br>
                            <p style="color:#ffffff">${pp["產品名稱"]}<br>
                            ${pp["單價"]}元／點閱次數:${pp["點閱次數"]}</p></a>
                        </td>
                    </c:forEach>
		</tr>
                
                <tr>
                    <c:forEach items="${result}" var="pp" begin="6" step="1" end="8">
			<td align="center">
                            <a href="/playdoll/shop/index?pid=${pp["產品編號"]}" style="text-decoration: none;"><img style="width:240px;height:160px;" src="/playdoll/WebTool/GetProductPic.jsp?pid=${pp["產品編號"]}" title="${pp["產品名稱"]}" />
                            <br><br>
                            <p style="color:#ffffff">${pp["產品名稱"]}<br>
                            ${pp["單價"]}元／點閱次數:${pp["點閱次數"]}</p></a>
                        </td>
                    </c:forEach>
		</tr>
                
                <tr>
                    <td style="font-size:1em;color:#ffffff;" align="center" colspan='3'>${pageList}</td>
		</tr>
          </table>
<!-- End slide_screen --></div>    

<!-- End Content --> </div>

  
  <%@include file="../WebTool/Footer.jsp" %>
	
  <!-- end .container --></div>
  
  
<div style="text-align:center;clear:both">


<!-- IMAGE-SLIDE -->
<script type="text/javascript" >
(function() {
	var LI_WIDTH = [500, 225, 225, 225], 
		LI_DOM = [$('.slide_screen li.liA'), $('.slide_screen li.liB'), $('.slide_screen li.liC'), $('.slide_screen li.liD')], 
		LI_BTN = $('.slide_screen .libtn'),
		COUNT =  3, SPEED = 1000, DISTIM = 4500, LI_COUNT = 4;
	var cur = 1, next_cur = 2, runid, isclick = true;

	init();
	initEvent();

	runid = setInterval(run, DISTIM);
	function init() {
		LI_BTN.find('li').eq(cur-1).addClass('selected');

		for(var i=0; i<LI_COUNT; i++) {
			LI_DOM[i].find('.window').css({'top':0, 'left':0, 'position':'absolute'});
			LI_DOM[i].find('.window').css('width', LI_WIDTH[i]*COUNT);
		}

	}
	function initEvent() {
		LI_BTN.click(function(ev){
			if(isclick && $(ev.target).attr("_index") !== undefined) {
				isclick = false;
				LI_BTN.find('li').eq(cur-1).removeClass('selected');
				clearInterval(runid);
				runid = null;
				cur = parseInt($(ev.target).attr("_index"));
				next_cur = cur + 1;
				LI_BTN.find('li').eq(cur-1).addClass('selected');
				for(var i=0; i<LI_COUNT; i++) {
					LI_DOM[i].find('.window').stop(true,true).animate({"left": -(cur-1)*LI_WIDTH[i]}, SPEED, function(){
						if(runid===null)runid = setInterval(run, DISTIM);
						isclick = true;
					});
				}
			}
		});
	}
	function run() {
		isclick = false;
		LI_BTN.find('li').eq(cur-1).removeClass('selected');
		if(cur != COUNT){
			for(var i=0; i<LI_COUNT; i++) {
				LI_DOM[i].find('.window').stop(true,true).animate({"left": -(next_cur-1)*LI_WIDTH[i]}, SPEED, function() {
					isclick = true;
				});
			}
			cur++;
			next_cur = cur + 1;
		}
		else {
			for(var i=0; i<LI_COUNT; i++) {
				LI_DOM[i].find('.piece:lt('+(COUNT-1)+')').clone().insertAfter(LI_DOM[i].find('.piece').last());
				LI_DOM[i].find('.piece:lt('+(COUNT-1)+')').remove();
				LI_DOM[i].find('.window').css('left', '0px');

                LI_DOM[i].find('.window').stop(true,true).animate({"left": -LI_WIDTH[i]}, SPEED, function() {
	            	$(this).find('.piece').first().clone().insertAfter($(this).find('.piece').last());
	            	$(this).find('.piece').first().remove();
	            	$(this).css('left', '0px');
	            	isclick = true;
                });
			}
			cur = 1;
			next_cur = cur + 1;
		}
		LI_BTN.find('li').eq(cur-1).addClass('selected');
	}
})();
</script>

<!--Search-->
<script>
    function search( )
    {　
        var s=document.getElementById("search").value
    }  
</script>

</div>

</body>
</html>